<template>
  <div class="activity-list">
    <div class="tab">活动</div>
    <div class="activity-item" v-for="(act, index) in activities" :key="index" @click="$router.push('/feeds/' + act.id)">
      <div class="pic">
        <img :src="act.covers && act.covers[0].url" alt="" />
      </div>
      <div class="desc">
        <div class="title">{{ act.title }}</div>
        <div class="time-box">
          <span class="address">{{ act.business && act.business.name }}</span>
          <span class="spot">·</span>
          <span class="time">{{ act.time }}</span>
        </div>
        <div class="side-box">
          <div class="likes">
            <span class="icon">
              <img src="@/assets/goImages/_U.png" alt="" />
            </span>
            <span class="like-count">{{ act.likes }}</span>
          </div>
          <div class="side">
            <span class="icon">
              <img src="@/assets/goImages/K5.png" alt="" />
            </span>
            <span class="side-count">{{ act.pic_count || 0 }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="more-activity" @click.stop="$router.push('/searchmorelist')">
      <span>查看更多</span>
      <span class="icon">
        <img src="@/assets/arrow/pN.png" alt="" />
      </span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    activities: Array
  }
}
</script>

<style lang="less" scoped>
.activity-list {
  padding: 10px 10px 30px;
  position: relative;
  img {
    height: 100%;
    width: 100%;
  }

  .tab {
    color: #333;
    font-weight: 700;
    font-size: 18px;
    padding: 10px 0;
  }

  .activity-item {
    display: flex;
    margin-bottom: 10px;

    .pic {
      height: 80px;
      width: 120px;
    }
    .desc {
      padding-left: 10px;
      flex: 1;

      .title {
        color: #333;
        font-size: 16px;
        font-weight: 700;
        max-width: 200px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .time-box {
        display: flex;
        align-items: center;
        color: #aaa;
        font-size: 12px;
        padding: 5px 0;

        .address {
          padding: 5px 0;
          max-width: 120px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .spot {
          font-size: 18px;
          font-weight: 700;
        }
      }

      .side-box {
        display: flex;
        align-items: center;
        padding: 5px 0;
        margin-top: 5px;
        font-size: 14px;
        color: #cacaca;

        .likes,
        .side {
          display: flex;
          align-items: center;
          margin-right: 10px;

          .icon {
            height: 14px;
            width: 14px;
          }
        }
      }
    }
  }

  .more-activity {
    position: absolute;
    bottom: 5px;
    width: 100%;
    font-size: 14px;
    color: #333;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;

    .icon {
      height: 12px;
      width: 12px;
      align-content: flex-start;
    }
  }
}
</style>
